<!DOCTYPE html>

<html>
<head>
  <title>subexp.js</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="..\..\..\docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>subexp.js</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              <p>Subexp nodes are for expressions inside of parenthesis. It is rendered as a
labeled box around the contained expression if a label is required.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">import</span> _ <span class="hljs-keyword">from</span> <span class="hljs-string">'lodash'</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  <span class="hljs-attr">type</span>: <span class="hljs-string">'subexp'</span>,

  <span class="hljs-attr">definedProperties</span>: {</pre></div></div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>Default anchor is overridden to move it down to account for the group
label and outline box.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    _anchor: {
      <span class="hljs-attr">get</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">var</span> anchor = <span class="hljs-keyword">this</span>.regexp.getBBox(),
            matrix = <span class="hljs-keyword">this</span>.transform().localMatrix;

        <span class="hljs-keyword">return</span> {
          <span class="hljs-attr">ax</span>: matrix.x(anchor.ax, anchor.ay),
          <span class="hljs-attr">ax2</span>: matrix.x(anchor.ax2, anchor.ay),
          <span class="hljs-attr">ay</span>: matrix.y(anchor.ax, anchor.ay)
        };
      }
    }
  },

  <span class="hljs-attr">labelMap</span>: {
    <span class="hljs-string">'?:'</span>: <span class="hljs-string">''</span>,
    <span class="hljs-string">'?='</span>: <span class="hljs-string">'正向前瞻'</span>,
    <span class="hljs-string">'?!'</span>: <span class="hljs-string">'负向前瞻'</span>
  },</pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>Renders the subexp into the currently set container.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  _render() {</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p><strong>NOTE:</strong> <code>this.label()</code> <strong>MUST</strong> be called here, in _render, and before
any child nodes are rendered. This is to keep the group numbers in the
correct order.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">let</span> label = <span class="hljs-keyword">this</span>.label();</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>Render the contained regexp.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.regexp.render(<span class="hljs-keyword">this</span>.container.group())</pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>Create the labeled box around the regexp.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      .then(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">this</span>.renderLabeledBox(label, <span class="hljs-keyword">this</span>.regexp, {
        <span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>
      }));
  },</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>Returns the label for the subexpression.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  label() {
    <span class="hljs-keyword">if</span> (_.has(<span class="hljs-keyword">this</span>.labelMap, <span class="hljs-keyword">this</span>.properties.capture.textValue)) {
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.labelMap[<span class="hljs-keyword">this</span>.properties.capture.textValue];
    } <span class="hljs-keyword">else</span> {
      <span class="hljs-keyword">return</span> <span class="hljs-string">`普通捕获分组 #<span class="hljs-subst">${<span class="hljs-keyword">this</span>.state.groupCounter++}</span>`</span>;
    }
  },

  setup() {</pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p><strong>NOTE:</strong> <strong>DO NOT</strong> call <code>this.label()</code> in setup. It will lead to
groups being numbered in reverse order.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">this</span>.regexp = <span class="hljs-keyword">this</span>.properties.regexp;</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>If there is no need for a label, then proxy to the nested regexp.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.properties.capture.textValue == <span class="hljs-string">'?:'</span>) {
      <span class="hljs-keyword">this</span>.proxy = <span class="hljs-keyword">this</span>.regexp;
    }
  }
};</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
